<!DOCTYPE html>
<html>
<head>
    <title>Optics Diagram</title>
</head>
<body>
    <canvas id="physicsCanvas" width="550" height="400"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 1.5;
        
        // Parameters
        const cx = 220; // lens center x
        const cy = 150; // optical axis y
        const lensHeight = 60;
        const lensWidth = 20;
        const f = 150; // focal length in pixels
        const v = 180; // image distance in pixels

        const x_lens = cx;
        const x_focal_plane = cx + f;
        const x_image_plane = cx + v;

        // Draw Principal Axis (dashed line)
        ctx.beginPath();
        ctx.setLineDash([6, 4]);
        ctx.moveTo(20, cy);
        ctx.lineTo(x_image_plane + 50, cy);
        ctx.stroke();
        ctx.setLineDash([]);

        // Draw Biconvex Lens
        ctx.beginPath();
        ctx.moveTo(x_lens, cy - lensHeight);
        ctx.quadraticCurveTo(x_lens + lensWidth * 1.8, cy, x_lens, cy + lensHeight);
        ctx.quadraticCurveTo(x_lens - lensWidth * 1.8, cy, x_lens, cy + lensHeight);
        ctx.stroke();

        // Draw Incoming Rays (slightly converging as in the diagram)
        const startX = 40;
        const startHeight = lensHeight + 10;
        ctx.beginPath();
        ctx.moveTo(startX, cy - startHeight);
        ctx.lineTo(x_lens, cy - lensHeight);
        ctx.moveTo(startX, cy + startHeight);
        ctx.lineTo(x_lens, cy + lensHeight);
        ctx.stroke();
        
        // Draw Outgoing Rays
        ctx.beginPath();
        ctx.moveTo(x_lens, cy - lensHeight);
        ctx.lineTo(x_image_plane, cy);
        ctx.moveTo(x_lens, cy + lensHeight);
        ctx.lineTo(x_image_plane, cy);
        ctx.stroke();

        // Draw Focal Plane (solid vertical line)
        const d_half = lensHeight * (v - f) / v; // from similar triangles
        const focal_plane_height = d_half + 25;
        ctx.beginPath();
        ctx.moveTo(x_focal_plane, cy - focal_plane_height);
        ctx.lineTo(x_focal_plane, cy + focal_plane_height);
        ctx.stroke();

        // Draw Image Plane (dashed vertical line)
        const y_v_dim_line = cy + 120;
        ctx.beginPath();
        ctx.setLineDash([4, 2]);
        ctx.moveTo(x_image_plane, cy);
        ctx.lineTo(x_image_plane, y_v_dim_line + 5);
        ctx.stroke();
        ctx.setLineDash([]);
        
        // Set font for labels
        ctx.font = 'italic 20px Times';
        ctx.textAlign = 'center';

        // Dimension D
        const xD_line = x_lens - 20;
        ctx.beginPath();
        ctx.moveTo(xD_line, cy - lensHeight);
        ctx.lineTo(xD_line, cy + lensHeight);
        ctx.moveTo(xD_line - 5, cy - lensHeight);
        ctx.lineTo(xD_line + 5, cy - lensHeight);
        ctx.moveTo(xD_line - 5, cy + lensHeight);
        ctx.lineTo(xD_line + 5, cy + lensHeight);
        ctx.stroke();
        ctx.beginPath();
        ctx.setLineDash([6, 4]);
        ctx.moveTo(xD_line, cy);
        ctx.lineTo(xD_line - 50, cy);
        ctx.stroke();
        ctx.setLineDash([]);
        ctx.fillText('D', xD_line - 35, cy + 6);
        
        // Dimension d
        const xd_line = x_focal_plane - 20;
        ctx.beginPath();
        ctx.moveTo(xd_line, cy - d_half);
        ctx.lineTo(xd_line, cy + d_half);
        ctx.moveTo(xd_line - 5, cy - d_half);
        ctx.lineTo(xd_line + 5, cy - d_half);
        ctx.moveTo(xd_line - 5, cy + d_half);
        ctx.lineTo(xd_line + 5, cy + d_half);
        ctx.stroke();
        ctx.beginPath();
        ctx.setLineDash([6, 4]);
        ctx.moveTo(xd_line, cy);
        ctx.lineTo(xd_line - 35, cy);
        ctx.stroke();
        ctx.setLineDash([]);
        ctx.fillText('d', xd_line - 25, cy + 6);

        // Dimension f and v
        const y_f_dim_line = cy + 95;

        // Vertical start line (for both f and v)
        ctx.beginPath();
        ctx.moveTo(x_lens, cy);
        ctx.lineTo(x_lens, y_v_dim_line + 5);
        ctx.stroke();

        // Vertical end line for f
        ctx.beginPath();
        ctx.moveTo(x_focal_plane, cy);
        ctx.lineTo(x_focal_plane, y_f_dim_line + 5);
        ctx.stroke();

        // Draw f dimension line
        ctx.beginPath();
        ctx.moveTo(x_lens, y_f_dim_line);
        ctx.lineTo(x_focal_plane, y_f_dim_line);
        ctx.stroke();
        // Arrowheads for f (filled)
        ctx.beginPath();
        ctx.moveTo(x_lens, y_f_dim_line);
        ctx.lineTo(x_lens + 8, y_f_dim_line - 4);
        ctx.lineTo(x_lens + 8, y_f_dim_line + 4);
        ctx.closePath();
        ctx.fill();
        ctx.beginPath();
        ctx.moveTo(x_focal_plane, y_f_dim_line);
        ctx.lineTo(x_focal_plane - 8, y_f_dim_line - 4);
        ctx.lineTo(x_focal_plane - 8, y_f_dim_line + 4);
        ctx.closePath();
        ctx.fill();
        ctx.fillText('f', x_lens + f / 2, y_f_dim_line - 8);

        // Draw v dimension line
        ctx.beginPath();
        ctx.moveTo(x_lens, y_v_dim_line);
        ctx.lineTo(x_image_plane, y_v_dim_line);
        // T-bars for v
        ctx.moveTo(x_lens, y_v_dim_line - 5);
        ctx.lineTo(x_lens, y_v_dim_line + 5);
        ctx.moveTo(x_image_plane, y_v_dim_line - 5);
        ctx.lineTo(x_image_plane, y_v_dim_line + 5);
        ctx.stroke();
        ctx.fillText('v', x_lens + v / 2, y_v_dim_line - 8);
        
        // Figure Caption
        ctx.font = 'bold 22px Times New Roman';
        ctx.fillText('Fig. 2.64', 275, 360);

    </script>
</body>
</html>